<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- 神奇的绝招 -->
    <meta name="viewport" content="width=750,target-densitydpi=device-dpi,maximum-scale=1.0, user-scalable=no">
    <script type="text/javascript">
        function setWidth(e) {
            if (/Andriod/i.test(navigator.userAgent)) {
                var f, d =
                    window.innerWidth; (d != e) && (f = d / e), document.addEventListener("DOMContentLoaded",
                        function () {
                            var a = document.getElementsByTagName("body")[0]; a.style.webkitTransformOrigin = "left top";
                            a.style.webkitTransform = "scale(" + f + ")"
                        }, !1)
            }
        } setWidth(750);
    </script>
    <title>搜索 - 乐购</title>
    <link rel="stylesheet" href="./css/reset-2.css">
    <link rel="stylesheet" href="./css/4.css">
    <link rel="stylesheet" href="css/swiper.min.css">
    <style>
        .swiper-container {
          width: 100%;
          height: 100%;
        }
        .swiper-slide {
          text-align: center;
          font-size: 18px;
          background: #fff;
    
          /* Center slide text vertically */
          display: -webkit-box;
          display: -ms-flexbox;
          display: -webkit-flex;
          display: flex;
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          -webkit-justify-content: center;
          justify-content: center;
          -webkit-box-align: center;
          -ms-flex-align: center;
          -webkit-align-items: center;
          align-items: center;
        }
    </style>
</head>

<body>
    <div class="container">
        <header>
            <div class="header">
                <img class="logo2" src="./images/logo.png" alt="">
                <!-- search 搜索 -->
                <div class="search">
                    <i class="icon fl">&#xe651;</i>
                    <!--放大镜-->
                    <input type="text" placeholder="输入商家、分类或商圈">
                </div>
                <!-- backtrack返回 -->
                <i class="icon backtrack">&#xe622;</i>
                <div class="clear"></div>
            </div>
        </header>
        <section>
            <div class="box">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <div class="content">
                                <div class="top-text">
                                    <p><a href="">热门搜索</a></p>
                                    <p><a href="">其美烤肉自助火锅城</a></p>
                                    <p><a href="">新聚点量版ktv</a></p>
                                </div>
                                <div class="bottom-text">
                                    <p><a href="">新聚点量版ktv</a></p>
                                    <p><a href="">新聚点量版ktv</a></p>
                                </div>
                                <div class="bottom-text">
                                    <p><a href="">新聚点量版ktv</a></p>
                                </div>
                                <ul>
                                        <li class="poxx"></li>
                                        <li></li>
                                        <li></li>
                                </ul>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="content">
                                <div class="top-text">
                                    <p><a href="">热门搜索</a></p>
                                    <p><a href="">其美烤肉自助火锅城</a></p>
                                    <p><a href="">新聚点量版ktv</a></p>
                                </div>
                                <div class="bottom-text">
                                    <p><a href="">新聚点量版ktv</a></p>
                                    <p><a href="">新聚点量版ktv</a></p>
                                </div>
                                <div class="bottom-text">
                                    <p><a href="">新聚点量版ktv</a></p>
                                </div>
                                <ul>
                                        <li></li>
                                        <li class="poxx"></li>
                                        <li></li>
                                </ul>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="content">
                                <div class="top-text">
                                    <p><a href="">热门搜索</a></p>
                                    <p><a href="">其美烤肉自助火锅城</a></p>
                                    <p><a href="">新聚点量版ktv</a></p>
                                </div>
                                <div class="bottom-text">
                                    <p><a href="">新聚点量版ktv</a></p>
                                    <p><a href="">新聚点量版ktv</a></p>
                                </div>
                                <div class="bottom-text">
                                    <p><a href="">新聚点量版ktv</a></p>
                                </div>
                                <ul>
                                        <li></li>
                                        <li></li>
                                        <li class="poxx"></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <!-- Add Pagination -->
                    <!-- <div class="swiper-pagination"></div> -->
                    <!-- Add Arrows -->
                    <!-- 箭头 -->
                    <!-- <div class="swiper-button-next"></div>
                                                        <div class="swiper-button-prev"></div> -->
                </div>
            </div>
            <div class="clear"></div>
        </section>
        <section>
            <div class="history">
                <i class="icon">&#xe625;</i>
                <p>联通流量充值</p>
            </div>
            <div class="history">
                <i class="icon">&#xe625;</i>
                <p>联通流量充值</p>
            </div>
            <div class="history">
                <i class="icon">&#xe625;</i>
                <p>联通流量充值</p>
            </div>
            <div class="history">
                <i class="icon">&#xe625;</i>
                <p>联通流量充值</p>
            </div>
            <div class="qc">
                <i class="icon">&#xe616;</i>
                <p>清除历史记录</p>
            </div>
        </section>
        <footer>
            <div class="footer"></div>
        </footer>
    </div>
    
    <script src="js/swiper.min.js"></script>
	<!-- Initialize Swiper -->
	<script>
		var swiper = new Swiper('.swiper-container', {
			loop: true,
			autoplay: {
				disableOnInteraction: false,
				autoplay: true,

			},

			pagination: {
				el: '.swiper-pagination',
				// type: 'fraction',
			},
			navigation: {
				nextEl: '.swiper-button-next',
				prevEl: '.swiper-button-prev',
			},
		});
    </script>
    <!-- <script src="js/swiper.min.js"></script>

     Initialize Swiper -->
    <!-- <script>
            var swiper = new Swiper('.swiper-container', {
                //   direction:'vartical',  //  垂直切换选项
                loop: true,  //循环拖动
                // autoplay:true,//等同于以下设置
                autoplay: {
                    delay: 3000,
                    // stopOnLastSlide: false,
                    disableOnInteraction: true,
                },
                pagination: {
                    el: '.swiper-pagination',
                    // type: 'fraction',
                },
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
            });
    
        </script> --> 
</body>

</html>